<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>App技术支持</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-md fixed w-full top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-4 flex items-center justify-between">
            <div class="flex items-center space-x-4">
                <div class="w-12 h-12 rounded-lg bg-primary flex items-center justify-center shadow-lg">
                    <i class="fa fa-mobile text-white text-2xl"></i>
                </div>
                <div>
                    <h1 class="text-xl font-bold text-dark">闹钟+</h1>
                    <p class="text-sm text-gray-500">待上架应用</p>
                </div>
            </div>
            <nav class="hidden md:flex space-x-8">
                <a href="#info" class="text-gray-600 hover:text-primary transition-colors">应用信息</a>
                <a href="#support" class="text-gray-600 hover:text-primary transition-colors">技术支持</a>
                <a href="#contact" class="text-gray-600 hover:text-primary transition-colors">联系我们</a>
            </nav>
            <button class="md:hidden text-gray-600 focus:outline-none">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
    </header>

    <!-- 移动端菜单 (默认隐藏) -->
    <div id="mobile-menu" class="fixed inset-0 bg-dark bg-opacity-50 z-40 hidden md:hidden">
        <div class="bg-white h-full w-64 p-4 shadow-lg transform transition-transform">
            <div class="flex justify-between items-center mb-8">
                <h3 class="font-bold text-lg">菜单</h3>
                <button id="close-menu" class="text-gray-500 hover:text-gray-700">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            <nav class="flex flex-col space-y-4">
                <a href="#info" class="text-gray-600 hover:text-primary py-2 border-b border-gray-100">应用信息</a>
                <a href="#support" class="text-gray-600 hover:text-primary py-2 border-b border-gray-100">技术支持</a>
                <a href="#contact" class="text-gray-600 hover:text-primary py-2">联系我们</a>
            </nav>
        </div>
    </div>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 pt-28 pb-16">
        <!-- App信息部分 -->
        <section id="info" class="mb-16">
            <div class="text-center mb-12">
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4 text-dark">应用信息</h2>
                <div class="w-20 h-1 bg-primary mx-auto rounded-full"></div>
            </div>
            
            <div class="bg-white rounded-2xl shadow-lg overflow-hidden max-w-4xl mx-auto card-hover">
                <div class="md:flex">
                    <div class="md:w-1/3 bg-gradient-to-br from-primary to-blue-700 flex items-center justify-center p-8">
                        <div class="w-48 h-48 bg-white rounded-2xl shadow-xl flex items-center justify-center p-3">
                            <img src="https://picsum.photos/200/200" alt="App图标" class="w-full h-full object-contain rounded-xl">
                        </div>
                    </div>
                    <div class="md:w-2/3 p-8">
                        <h3 class="text-2xl font-bold mb-4">闹钟+</h3>
                        <p class="text-gray-600 mb-6">一款即将上架的创新应用，将为用户带来全新的体验。我们致力于提供高质量的服务和卓越的用户体验。</p>
                        
                        <div class="space-y-3">
                            <div class="flex items-center">
                                <i class="fa fa-calendar text-primary w-6"></i>
                                <span class="ml-3 text-gray-700">预计上架日期: 2023年12月</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-mobile text-primary w-6 text-xl"></i>
                                <span class="ml-3 text-gray-700">支持平台: iOS / Android</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-language text-primary w-6"></i>
                                <span class="ml-3 text-gray-700">支持语言: 简体中文、英文</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 技术支持部分 -->
        <section id="support" class="mb-16">
            <div class="text-center mb-12">
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4 text-dark">技术支持</h2>
                <div class="w-20 h-1 bg-primary mx-auto rounded-full"></div>
                <p class="mt-4 text-gray-600 max-w-2xl mx-auto">如果您在使用过程中遇到任何问题，或有任何建议，欢迎通过以下方式联系我们的技术支持团队</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
                <!-- 支持方式1：邮件 -->
                <div class="bg-white rounded-xl shadow-md p-6 text-center card-hover">
                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fa fa-envelope text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">电子邮件</h3>
                    <p class="text-gray-600 mb-4">发送详细问题描述至我们的支持邮箱，我们将在24小时内回复</p>
                    <a href="mailto:support@闹钟+.com" class="text-primary hover:text-blue-700 font-medium inline-flex items-center">
                        support@闹钟+.com
                        <i class="fa fa-arrow-right ml-2 text-sm"></i>
                    </a>
                </div>
                
                <!-- 支持方式2：电话 -->
                <div class="bg-white rounded-xl shadow-md p-6 text-center card-hover">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fa fa-phone text-secondary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">电话支持</h3>
                    <p class="text-gray-600 mb-4">工作时间内拨打我们的支持热线，将有专人协助您解决问题</p>
                    <a href="tel:+8612345678901" class="text-secondary hover:text-green-700 font-medium inline-flex items-center">
                        400-123-4567
                        <i class="fa fa-arrow-right ml-2 text-sm"></i>
                    </a>
                    <p class="text-sm text-gray-500 mt-2">工作时间: 周一至周五 9:00-18:00</p>
                </div>
                
                <!-- 支持方式3：在线表单 -->
                <div class="bg-white rounded-xl shadow-md p-6 text-center card-hover">
                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fa fa-file-text-o text-purple-500 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">在线表单</h3>
                    <p class="text-gray-600 mb-4">填写在线问题反馈表单，详细描述您遇到的问题</p>
                    <button id="open-form" class="text-purple-500 hover:text-purple-700 font-medium inline-flex items-center">
                        提交反馈
                        <i class="fa fa-arrow-right ml-2 text-sm"></i>
                    </button>
                </div>
            </div>
        </section>
        
        <!-- 联系我们部分 -->
        <section id="contact" class="mb-16">
            <div class="text-center mb-12">
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4 text-dark">联系我们</h2>
                <div class="w-20 h-1 bg-primary mx-auto rounded-full"></div>
            </div>
            
            <div class="bg-white rounded-2xl shadow-lg p-8 max-w-5xl mx-auto">
                <div class="grid md:grid-cols-2 gap-8">
                    <div>
                        <h3 class="text-xl font-semibold mb-6">公司信息</h3>
                        <div class="space-y-4">
                            <div class="flex items-start">
                                <i class="fa fa-map-marker text-primary mt-1 w-6"></i>
                                <span class="ml-3 text-gray-700">北京市海淀区科技园区88号创新大厦15层</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-globe text-primary w-6"></i>
                                <a href="#" class="ml-3 text-gray-700 hover:text-primary">www.companyname.com</a>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-phone text-primary w-6"></i>
                                <span class="ml-3 text-gray-700">+86 10 8888 7777</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-envelope text-primary w-6"></i>
                                <a href="mailto:info@闹钟+.com" class="ml-3 text-gray-700 hover:text-primary">info@闹钟+.com</a>
                            </div>
                        </div>
                        
                        <div class="mt-8">
                            <h4 class="font-medium mb-4">关注我们</h4>
                            <div class="flex space-x-4">
                                <a href="#" class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
                                    <i class="fa fa-weixin"></i>
                                </a>
                                <a href="#" class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
                                    <i class="fa fa-weibo"></i>
                                </a>
                                <a href="#" class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
                                    <i class="fa fa-github"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <h3 class="text-xl font-semibold mb-6">常见问题</h3>
                        <div class="space-y-4">
                            <div class="border-b border-gray-100 pb-4">
                                <button class="faq-toggle flex justify-between items-center w-full text-left font-medium">
                                    <span>应用何时正式上架？</span>
                                    <i class="fa fa-chevron-down text-gray-400 transition-transform"></i>
                                </button>
                                <div class="faq-content hidden mt-2 text-gray-600">
                                    我们计划在2023年12月正式上架应用，目前正在进行最后的测试和优化工作。您可以关注我们的官方公众号获取最新动态。
                                </div>
                            </div>
                            <div class="border-b border-gray-100 pb-4">
                                <button class="faq-toggle flex justify-between items-center w-full text-left font-medium">
                                    <span>应用支持哪些设备？</span>
                                    <i class="fa fa-chevron-down text-gray-400 transition-transform"></i>
                                </button>
                                <div class="faq-content hidden mt-2 text-gray-600">
                                    我们的应用将同时支持iOS和Android平台。iOS需要9.0及以上版本，Android需要6.0及以上版本。
                                </div>
                            </div>
                            <div class="border-b border-gray-100 pb-4">
                                <button class="faq-toggle flex justify-between items-center w-full text-left font-medium">
                                    <span>如何获取应用的测试资格？</span>
                                    <i class="fa fa-chevron-down text-gray-400 transition-transform"></i>
                                </button>
                                <div class="faq-content hidden mt-2 text-gray-600">
                                    您可以通过我们的官方网站申请测试资格，我们会筛选部分用户参与beta测试，并提供专属测试链接。
                                </div>
                            </div>
                            <div>
                                <button class="faq-toggle flex justify-between items-center w-full text-left font-medium">
                                    <span>应用是否收费？</span>
                                    <i class="fa fa-chevron-down text-gray-400 transition-transform"></i>
                                </button>
                                <div class="faq-content hidden mt-2 text-gray-600">
                                    应用下载免费，基础功能完全开放。我们提供高级会员服务，解锁更多专业功能，详情将在应用上架时公布。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    
    <!-- 问题反馈表单模态框 (默认隐藏) -->
    <div id="feedback-modal" class="fixed inset-0 bg-dark bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
        <div class="bg-white rounded-2xl shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto">
            <div class="p-6 border-b border-gray-100">
                <div class="flex justify-between items-center">
                    <h3 class="text-xl font-bold">问题反馈</h3>
                    <button id="close-modal" class="text-gray-500 hover:text-gray-700">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            <div class="p-6">
                <form id="feedback-form">
                    <div class="mb-4">
                        <label for="name" class="block text-gray-700 mb-2">姓名</label>
                        <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="请输入您的姓名">
                    </div>
                    <div class="mb-4">
                        <label for="email" class="block text-gray-700 mb-2">邮箱</label>
                        <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="请输入您的邮箱地址">
                    </div>
                    <div class="mb-4">
                        <label for="subject" class="block text-gray-700 mb-2">问题类型</label>
                        <select id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors">
                            <option value="">请选择问题类型</option>
                            <option value="installation">安装问题</option>
                            <option value="functionality">功能问题</option>
                            <option value="performance">性能问题</option>
                            <option value="suggestion">功能建议</option>
                            <option value="other">其他问题</option>
                        </select>
                    </div>
                    <div class="mb-6">
                        <label for="message" class="block text-gray-700 mb-2">问题描述</label>
                        <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="请详细描述您遇到的问题或建议"></textarea>
                    </div>
                    <button type="submit" class="w-full bg-primary text-white py-3 px-4 rounded-lg hover:bg-blue-700 transition-colors font-medium flex items-center justify-center">
                        提交反馈
                        <i class="fa fa-paper-plane ml-2"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>
    
    <!-- 提交成功提示 (默认隐藏) -->
    <div id="success-message" class="fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg transform translate-x-full transition-transform duration-300 z-50 flex items-center">
        <i class="fa fa-check-circle mr-2"></i>
        <span>反馈提交成功，感谢您的支持！</span>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-10">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 rounded-lg bg-white flex items-center justify-center">
                            <i class="fa fa-mobile text-primary text-xl"></i>
                        </div>
                        <span class="font-bold text-lg">闹钟+</span>
                    </div>
                </div>
                <div class="text-center md:text-right">
                    <p class="text-gray-400 mb-2">© 2023 闹钟+. 保留所有权利。</p>
                    <p class="text-gray-500 text-sm">京ICP备12345678号-1</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 移动端菜单控制
        const menuButton = document.querySelector('button.md\\:hidden');
        const mobileMenu = document.getElementById('mobile-menu');
        const closeMenu = document.getElementById('close-menu');
        const mobileLinks = mobileMenu.querySelectorAll('a');
        
        menuButton.addEventListener('click', () => {
            mobileMenu.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        });
        
        function hideMobileMenu() {
            mobileMenu.classList.add('hidden');
            document.body.style.overflow = '';
        }
        
        closeMenu.addEventListener('click', hideMobileMenu);
        mobileLinks.forEach(link => {
            link.addEventListener('click', hideMobileMenu);
        });
        
        // 导航栏滚动效果
        window.addEventListener('scroll', () => {
            const header = document.querySelector('header');
            if (window.scrollY > 10) {
                header.classList.add('py-2');
                header.classList.remove('py-4');
            } else {
                header.classList.add('py-4');
                header.classList.remove('py-2');
            }
        });
        
        // FAQ 折叠功能
        const faqToggles = document.querySelectorAll('.faq-toggle');
        
        faqToggles.forEach(toggle => {
            toggle.addEventListener('click', () => {
                const content = toggle.nextElementSibling;
                const icon = toggle.querySelector('i');
                
                // 切换当前FAQ的显示状态
                content.classList.toggle('hidden');
                icon.classList.toggle('rotate-180');
                
                // 关闭其他打开的FAQ
                faqToggles.forEach(otherToggle => {
                    if (otherToggle !== toggle) {
                        const otherContent = otherToggle.nextElementSibling;
                        const otherIcon = otherToggle.querySelector('i');
                        
                        if (!otherContent.classList.contains('hidden')) {
                            otherContent.classList.add('hidden');
                            otherIcon.classList.remove('rotate-180');
                        }
                    }
                });
            });
        });
        
        // 反馈表单模态框控制
        const openFormButton = document.getElementById('open-form');
        const feedbackModal = document.getElementById('feedback-modal');
        const closeModalButton = document.getElementById('close-modal');
        const feedbackForm = document.getElementById('feedback-form');
        const successMessage = document.getElementById('success-message');
        
        function openModal() {
            feedbackModal.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }
        
        function closeModal() {
            feedbackModal.classList.add('hidden');
            document.body.style.overflow = '';
        }
        
        openFormButton.addEventListener('click', openModal);
        closeModalButton.addEventListener('click', closeModal);
        
        // 点击模态框外部关闭
        feedbackModal.addEventListener('click', (e) => {
            if (e.target === feedbackModal) {
                closeModal();
            }
        });
        
        // 表单提交处理
        feedbackForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            // 在实际应用中，这里会有AJAX请求发送表单数据到服务器
            // 这里仅做模拟
            closeModal();
            feedbackForm.reset();
            
            // 显示成功消息
            successMessage.classList.remove('translate-x-full');
            
            // 3秒后隐藏成功消息
            setTimeout(() => {
                successMessage.classList.add('translate-x-full');
            }, 3000);
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80, // 考虑导航栏高度
                        behavior: 'smooth'
                    });
                }
            });
        });
    </script>
</body>
</html>
